<template>
    小明的学习成绩评定为：
    <p v-if="type === 'A'">优秀</p>
    <p v-else-if="type === 'B'">良好</p>
    <p v-else>合格</p>
    
    <button @click="changeGradeA">优秀</button>
    <button @click="changeGradeB">良好</button>
    <button @click="changeGradeC">合格</button>
</template>

<script setup>
    import {ref} from 'vue'
    const type = ref('B')
    const changeGradeA = () => {
        type.value = 'A'
    }
    const changeGradeB = () => {
        type.value = 'B'
    }
    const changeGradeC = () => {
        type.value = 'C'
    }
</script>